<template>
	<view class="com">
		<view class="bg" :style="bgStyle">
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from "vue";
	import {
		getConfig,
	} from '@/api/config.js'

	let config = []
	const bgStyle = ref({
		backgroundImage: ''
	})

	onMounted(async () => {
		config = await getConfig()
		const bgObj = config.find(o => o.label === 'bg')
		if (bgObj) {
			bgStyle.value.backgroundImage = `url(${bgObj.value})`
		}
	})
</script>

<style lang="scss" scoped>
	.com {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: -1;

		.bg {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			background-size: contain;
			background-position: center;
			background-repeat: repeat;
		}
	}
</style>